<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        .box{
            width: 600px;
            height: 300px;
            background-color: aqua;
            margin: auto;
           
        }
        h1{
            text-align: center;
        }
           p{
            font-size: 30px;
           }
          .box1{
            margin: auto;
            margin-bottom: auto;
            width: 300px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap:130px;
          }
          button{
            width: 100px;
            height: 30px;
          }
    </style>
</head>
<body>
    <div class="box">
        <h1>随即问答</h1>
        <p>
            问题是:<span class="name">?</span>
        </p>
        <div class="box1">
            <button class="start">开始</button>
            <button class="end">结束</button>
        </div>
    </div>
    <script>
        const people=['张飞',"赵云","达摩","貂蝉"]
        
        const name=document.querySelector('.name')
        const but=document.querySelector('.start')
        const bu=document.querySelector('.end')
        let time=0
        let k=0

        but.addEventListener('click',function(){
            time=setInterval(function(){
             k=Math.floor(Math.random()*people.length)
             name.innerHTML=people[k]
              },1)
              if(people.length==1){
                but.disabled='true'
                bu.disabled='true'
                alert('剩下一个数据')
              }
        })
        bu.addEventListener('click',function(){
            clearInterval(time)
            people.splice(k,1)

        })
       
       
    </script>
</body>
</html>